<template>
	<view class="container">
		<scroll-view scroll-y="true" @scrolltolower="onLoadMore" @refresherrefresh="onRefresh" :refresher-enabled="true" :refresher-triggered="refreshing">
		<!-- 加载状态 -->
		<view v-if="loading" class="loading-container">
			<text class="loading-text">加载中...</text>
		</view>

		<!-- 空状态 -->
		<view v-else-if="list.length === 0" class="empty-container">
			<image class="empty-icon" src="/static/icon/empty-address.png" mode="aspectFit"></image>
			<text class="empty-text">暂无收货地址</text>
		</view>

		<!-- 地址列表 -->
		<view v-else class="address-card" v-for="(item, index) in list" :key="item.id" @click="confirmAddress(item)">
			<!-- 地址信息区域 -->
			<view class="address-info">
				<view class="address-header">
					<view class="user-info">
						<text class="name">{{item.nickname}}</text>
						<text class="phone">{{item.phone}}</text>
					</view>
					<view class="default-tag" :class="[item.status === 1 ? 'active' : '']" @click.stop="setDefault(item)">
						<text>{{item.status === 1 ? '默认' : '默认'}}</text>
					</view>
				</view>
				<view class="address-detail">
					{{item.address}} {{  item.house || '' }}
				</view>
			</view>

			<!-- 操作区域 -->
			<view class="address-actions">
				<view v-if="!isFromOrder" class="default-status">
					<view class="checkbox" :class="[item.status === 1 ? 'checked' : '']" @click="setDefault(item)">
						<text v-if="item.status === 1" class="check-icon">✓</text>
					</view>
					<text class="status-text">{{item.status === 1 ? '已默认' : '设为默认'}}</text>
				</view>
				<view v-if="!isFromOrder" class="action-buttons">
					<view class="action-btn" @click.stop="delAddress(item)">删除</view>
					<view class="action-btn" @click.stop="copyAddress(item)">复制</view>
					<view class="action-btn" @click.stop="editAddress(item)">修改</view>
				</view>
<!--				<view v-if="isFromOrder" class="select-button" @click="confirmAddress(item)">-->
<!--					<text class="select-text">选择此地址</text>-->
<!--				</view>-->
			</view>
		</view>

		</scroll-view>

		<!-- 新增地址按钮 -->
		<view class="add-address-btn">
			<ZButton  @click="add()">新增地址</ZButton>
		</view>
	</view>
</template>

<script>
			import ZButton from "../../components/ZButton.vue";

      export default {
        components: {ZButton},
			data() {
				return {
					list: [],
					loading: false,
					refreshing: false,
					isFromOrder: false
				}
			},
		onShow() {
			// 检查是否从订单页面跳转过来
			const pages = getCurrentPages();
			const prevPage = pages[pages.length - 2];
			console.log(prevPage.route, 'prevPage');
			this.isFromOrder = prevPage && prevPage.route === 'pages/cart/payment'

			// 加载地址列表
			this.loadAddressList();
		},
		methods: {
			// 加载地址列表
			loadAddressList() {
				this.loading = true;
				return this.$api.getAddressList({
					user_id: this.userInfo.id
				}).then(res => {
					this.list = res;
				}).finally(() => {
					this.loading = false;
				});
			},

			// 添加新地址
			add() {
				uni.navigateTo({
					url: "/pages/address/add"
				});
			},

			// 编辑地址
			editAddress(item) {
				uni.navigateTo({
					url: "/pages/address/add?id=" + item.id
				});
			},

			// 确认选择地址
			confirmAddress(item) {
				if (this.isFromOrder) {
					// 从订单确认页面跳转过来，设置选中的地址
					uni.setStorageSync('selectedAddress', item);
					uni.navigateBack();
				}
			},

			// 设置默认地址
			setDefault(item) {
				if (item.status === 1) {
					return; // 已经是默认地址
				}

				uni.showLoading({
					title: '设置中...'
				});

				// 调用API设置默认地址
				this.$api.updateAddress(item.id, {
					status: 1,
					user_id: item.user_id
				}).then(res => {
					uni.hideLoading();
					uni.showToast({
						title: '设置成功',
						icon: 'success'
					});
					// 重新加载地址列表
					this.loadAddressList();
				})
			},

			// 复制地址
			copyAddress(item) {
				const addressText = `${item.nickname} ${item.phone} ${item.address}`;
				uni.setClipboardData({
					data: addressText,
					success: () => {
						uni.showToast({
							title: '地址已复制',
							icon: 'success'
						});
					},
					fail: () => {
						uni.showToast({
							title: '复制失败',
							icon: 'none'
						});
					}
				});
			},

			// 删除地址
			delAddress(item) {
				uni.showModal({
					title: '提示',
					content: '是否删除该地址?',
					success: res => {
						if (res.confirm) {
							uni.showLoading({
								title: '删除中...'
							});

							this.$api.deleteAddress(item.id).then(res => {
								uni.hideLoading();
								uni.showToast({
									title: '删除成功',
									icon: 'success'
								});
								// 重新加载地址列表
								this.loadAddressList();
							}).catch(error => {
								console.error('删除地址失败:', error);
							});
						}
					}
				});
			},

			// 下拉刷新
			onRefresh() {
				this.refreshing = true;
				this.loadAddressList().finally(() => {
					this.refreshing = false;
				});
			},

			// 加载更多
			onLoadMore() {
				// 地址列表通常不需要分页加载，这里可以添加其他逻辑
				console.log('加载更多');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		background: #f5f5f5;
		position: relative;
	}

	scroll-view {
		height: calc(100vh - 168rpx); /* 减去底部按钮的高度 */
		padding: 20rpx 30rpx;
		box-sizing: border-box;
	}

	/* 加载状态 */
	.loading-container {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 400rpx;

		.loading-text {
			font-size: 28rpx;
			color: #999999;
		}
	}

	/* 空状态 */
	.empty-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 400rpx;
		padding: 60rpx 0;

		.empty-icon {
			width: 120rpx;
			height: 120rpx;
			margin-bottom: 24rpx;
			opacity: 0.6;
		}

		.empty-text {
			font-size: 32rpx;
			color: #999999;
			margin-bottom: 12rpx;
		}

		.empty-desc {
			font-size: 26rpx;
			color: #CCCCCC;
		}
	}

	/* 地址卡片 */
	.address-card {
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 32rpx 24rpx;
		margin-bottom: 24rpx;
		width: 100%;
		box-sizing: border-box;
	}

	/* 地址信息区域 */
	.address-info {
		margin-bottom: 24rpx;

		.address-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 16rpx;

			.user-info {
				display: flex;
				align-items: center;
				gap: 16rpx;

				.name {
					font-size: 32rpx;
					font-weight: 600;
					color: #333333;
				}

				.phone {
					font-size: 28rpx;
					color: #666666;
				}
			}

			.default-tag {
				padding: 8rpx 16rpx;
				border-radius: 12rpx;
				font-size: 24rpx;
				border: 2rpx solid #fff;
				background: transparent;
				color: #333333;
				background-color: #fff;

				&.active {
				border: 2rpx solid #FF9500;
				}
			}
		}

		.address-detail {
			font-size: 28rpx;
			color: #666666;
			line-height: 1.5;
		}
	}

	/* 操作区域 */
	.address-actions {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-top: 20rpx;
		border-top: 1rpx solid #F5F5F5;

		.default-status {
			display: flex;
			align-items: center;
			gap: 12rpx;

			.checkbox {
				width: 32rpx;
				height: 32rpx;
				border: 2rpx solid #333;
				border-radius: 6rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #FFFFFF;
				transition: all 0.3s ease;
				.check-icon {
					color: #fff;
				}
				&.checked {
					.check-icon {
						color: #333;
						font-size: 20rpx;
						font-weight: bold;
					}
				}
			}

			.status-text {
				font-size: 26rpx;
				color: #666666;
			}
		}

		.action-buttons {
			display: flex;
			gap: 12rpx;

			.action-btn {
				padding: 12rpx 20rpx;
				background: #F8F8F8;
				border: none;
				border-radius: 8rpx;
				font-size: 24rpx;
				color: #333333;
				line-height: 1;

				&:active {
					background: #E8E8E8;
				}
			}
		}

		.select-button {
			width: 100%;
			padding: 20rpx;
			background: #FFC300;
			border-radius: 8rpx;
			text-align: center;

			.select-text {
				color: #fff;
				font-size: 28rpx;
				font-weight: 600;
			}

			&:active {
				background: #e55a2b;
			}
		}
	}

	/* 新增地址按钮 */
	.add-address-btn {
		position: fixed;
		bottom: 60rpx;
		left: 30rpx;
		right: 30rpx;
		z-index: 100;
	}
</style>
